@import './variable.scss';

.meeting {
  width: 100%;
  height: 100%;
  position: relative;

  .touchstartDrag{
    position: fixed;
    z-index:99999;
  }

  .member-item-card {
    float: left;
    border:1px solid #c0c0c0;
    border-radius: px(10);
    cursor: default;

    &.audio{
      margin: px(8);
      width: px(180);
    }
    &.video{
      width: px(200);
      margin: px(5);
    }
    .user-card-clearfix {
      display: flex;
      height: px(66);
      padding-top: 0;
      margin-left: 0;

      .user-img {
        width: px(66);
        height: px(66);
        border-radius: px(10) 0 0 0;
        background-size: contain;
        background-image: url('~@/assets/images/allowspeak.png');
  
        &.allowspeak {
          background-image: url('~@/assets/images/allowspeak.png');
        }
  
        &.banspeak {
          background-image: url('~@/assets/images/banspeak.png');
        }
  
        &.singletalk {
          background-image: url('~@/assets/images/singletalk.png');
        }
      }
  
      .user-info {
        width: calc(100% - #{px(66)});
        text-align: center;
  
        .user-name {
          max-width: 100%;
          margin-top: px(10);
          font-size: px(18);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
  
        .user-phone {
          font-size: px(14);
        }
      }
    }

    .user-card-footer {
      padding: 0;
      text-align: center;
      height: px(25);
      line-height: px(25);
      font-size: px(14);
      border-top: 1px solid #c0c0c0;
    }
  }

  .content-container {
    height: 100%;
    // width: calc(100% - 280px);
    flex: 1;

    .title {
      height: px(44);
      border-bottom: px(2) solid $selected_color;
    
      .title-content {
        width: px(220);

        .text {
          height: px(34);
          line-height: px(34);
          background-color: $selected_color;
          color: #ffffff;
          font-size: px(16);
          text-align: center;
        }

        .arrow {
          margin: 0 auto;
          width: px(8);
          font-size: 0;
          line-height: 0;
          border-width: px(8);
          border-color: $selected_color;
          border-bottom-width: 0;
          border-style: dashed;
          border-top-style: solid;
          border-left-color: transparent;
          border-right-color: transparent;
        }
      }
    }

    .main-container {
      height: calc(100% - #{px(44)});
      display: flex;
      .audio-meeting {
        width: px(220);
        min-width: px(220);
        background: #f5f5f5;
        height: 100% !important;

        .default-scrollbar {
          width: 100%;
          height: calc(100% - #{px(41)});
        }

        ::v-deep .default-scrollbar__wrap {
          width: auto;
          // height: 110%;
          overflow-x: hidden;
        }

        .audio-meeting-footer {
          cursor: pointer;
          height: px(30);
          line-height: px(30);
          font-size: px(16);
          text-align: center;
          background-color: $selected_color;
          color: #ffffff;
          margin: px(5) 0;

          &:hover{
            background-color:#006bb2;
          }
        }

        .el-tree {
          height: calc(100% - #{px(84)});
          background-color: #f5f5f5;

          ::v-deep .el-tree__empty-text{
            font-size: px(14);
          }

          ::v-deep .el-tree-node__content{
            height: px(34);
            line-height: px(34);
            &:hover {
              background-color: #bfe3ef;
            }

            &>.el-tree-node__expand-icon{
              padding: px(5);
              font-size: px(16);
            }

          }

          ::v-deep .el-tree-node.is-current>.el-tree-node__content {
            background-color: $selected_color;
            color: #ffffff;
          }
  
          ::v-deep .el-tree-node__expand-icon.el-icon-arrow-right {
            color: #000;
          }
  
          ::v-deep .is-leaf.el-tree-node__expand-icon.el-icon-arrow-right:before {
            content: none;
          }
          .el-tree--highlight-current>.el-tree-node {
            // margin-top: px(2);
            background-color: #c0c4cc;
  
            .el-checkbox .el-checkbox__inner {
              display: none;
            }
          }
          .el-tree-node__label{
            font-size: px(16);
          }
          ::v-deep div[role='group'] {
            background-color: #ffffff;
          }
        } 
      }

      .video-meeting {
        width: px(220);
        min-width: px(220);

        background: #f5f5f5;
        height: 100%;
        display: flex;
        flex-direction: column;

        .default-scrollbar {
          width: 100%;
          height: calc(100% - #{px(50)});
        }

        ::v-deep .default-scrollbar__wrap {
          width: auto;
          // height: 110%;
          overflow-x: hidden;
        }

        ::v-deep .el-tree--highlight-current>.el-tree-node {
          margin-top: px(2);
          background-color: #c0c4cc;

          .el-checkbox .el-checkbox__inner {
            display: none;
          }
        }

        ::v-deep div[role='group'] {
          background-color: #ffffff;
        }

        ::v-deep .el-tree-node {
          .el-checkbox .el-checkbox__inner {
            display: none;
          }

          .is-leaf+.el-checkbox .el-checkbox__inner {
            display: inline-block;
          }
        }

        .el-tree-node__content{
          height: px(30);
          line-height: px(30);
          cursor: default;

          &:hover {
            background-color: #bfe3ef;
          }

          &>.el-tree-node__expand-icon{
            padding: px(2);
            font-size: px(14);
            color: #000;
          }
          &>label.el-checkbox{
            margin-right: px(5);
          }
          .el-checkbox__inner{
            width: px(14);
            height: px(14);
          }
        }

        ::v-deep .el-tree-node.is-current>.el-tree-node__content {
          background-color: $selected_color;
          color: #ffffff;
        }

        ::v-deep .is-leaf.el-tree-node__expand-icon.el-icon-arrow-right:before {
          content: none;
        }


        .custom-tree-node {
          height: px(30);
          line-height: px(30);
          font-size: px(14);

          &.isDrag {
            cursor: pointer;
          }

          img {
            width: px(18);
            height: px(20);
            vertical-align: middle;
          }

          .video-online {
            content: url('~@/assets/images/Video_Online.png');
          }

          .video-offline {
            content: url('~@/assets/images/Video_Leave.png');
          }

          .video-playing {
            content: url('~@/assets/images/Video_Playing.png');
          }
        }

        .meeting-videos {
          height: px(34);
          line-height: px(34);
          font-size: px(14);
          margin-top: px(3);
          padding-left: px(24);
          background-color: #c0c4cc;
          color: #606266;
        }

        .footer {
          width: 100%;
          height: px(32);
          line-height: px(32);
          background-color: $selected_color;
          color: #ffffff;
          font-size: px(16);
          text-align: center;
          flex: 0 0 auto;
        }
      }

      .meeting-container {
        width: 100% !important;
        height: 100%;
        position: relative;

        .play-container {
          height: calc(100% - #{px(32)});
          width: 100%;
          // background-color: #000;
          position: relative;

          .audio-member-list {
            width: 100%;
            height: 100%;

            .audio-member-scrollbar {
              width: 100%;
              height: 100%;
            }

            ::v-deep .audio-member-scrollbar__wrap {
              width: auto;
              height: 110%;
              overflow-x: hidden;
            }
          }
        }

        .meeting-list {
          position: absolute;
          bottom: 0;
          width: 100%;
          background-color: #ffffff;

          &-header {
            width: 100%;
            height: px(32);
            line-height:  px(32);
            font-size: px(14);
            text-align: center;
            cursor: pointer;

            &:hover {
              color: $selected_color;
              background-color: #f9fcfa;
            }

            .left {
              float: left;
            }

            .svg-icon {
              width: px(20);
              height: px(20);
              margin-left: -#{px(88)};
            }
          }

          .meeting-list-body {
            display: flex;
            white-space: nowrap;
            overflow-y: auto;
            width: 100%;
            align-items: center;
            height: px(120);
            
            .scroll_div {
              overflow: hidden;
              white-space: nowrap;
              width: 100%;
              height: 100%;
              margin: 0 px(2);

              .scroll_box {
                height: 100%;
                display: inline-flex;

                .box-item {
                  position: relative;
                  margin: 0 px(8);
                  width: px(250);
                  text-align: center;
                  font-size: px(14);
                  color: #606266;
                  border-radius: px(6);
                  border: px(3) solid #00bfff;

                  .box-item-inner {
                    height: 100%;
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    justify-content: center;

                    &.isSelected {
                      background-color: #5bb3e6;
                      color: #fff;
                    }

                    .svg-icon {
                      width: px(40);
                      height: px(40);
                    }

                    &.add {
                      font-size: px(16);
                    }
                  }
                }
              }
            }
          }

          .arrow-offset {
            height: 100%;
            width: px(25);
            background-color: #b0c4de;
            line-height: px(118);

            .svg-icon {
              width: px(20);
              height: px(20);
              margin-right: 0;
              color: #ffffff;
            }
          }

          .right-top {
            position: absolute;
            z-index: 1;
            top: -#{px(28)};
            right: -#{px(28)};
            border-width: px(30);
            border-style: solid;
            border-color: transparent #0077c5 transparent transparent;
            -moz-transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            transform: rotate(135deg);
          }

          .right-top-delete {
            position: absolute;
            z-index: 2;
            top: px(5);
            right: px(5);
            width: px(20);
            height: px(20);
            color: #ffffff;
            cursor: pointer;
          }
        }
      }
    }
  }


  .tools-container {
    height: 100%;
    width: px(280);
    margin-left: auto;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;

    .header-title{
      height: px(44);
      .header {
        height: px(34);
        line-height: px(34);
        background-color: $selected_color;
        color: #ffffff;
        font-size: px(16);
        text-align: center;
      }
  
      .blank {
        height: px(10);
        background-color: #ffffff;
        border-left: 1px solid #c0c4cc;
        border-bottom: px(2) solid $selected_color;
      }
    }

    .tools {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 100%;
      margin: 0;
      background-color: grey;

      .el-link {
        color: #ffffff;

        &:hover {
          color: $selected_color;
        }

        height: px(60);
        width: px(54);
        text-align: center;
        padding: 0 px(3);

        .svg-icon {
          height: px(30);
          width: px(22);
        }

        .label {
          font-size: px(12);
        }
      }
    }

    .member-list {
      // height: calc(100% - 178px);
      flex: 1;
      padding-bottom: px(32);

      .member-scrollbar {
        height: 100%;
        margin-top: px(20) 0;

        ::v-deep .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
    }
  }
  .dial-plate {
    .dial-table {
      background-color: #6c6c6c;
    }
  }
}

